<template>
  <div style="height: 100%;width: 100%;">
    {{_id}}
    <!-- 建议组件 -->
    <el-autocomplete
      v-if="attr === 'autocomplete'"
      class="inline-input"
      :value="autoCompleteData"
      :fetch-suggestions="querySearch"
      :placeholder="placeholder"
      :trigger-on-focus="triggerOnFocus"
      @select="handleRestSelect"
      :disabled="disabled"
      :clearable="clearable"
      :size="size"
      :style="styleProps"
      @input="(e)=>$emit('input',e)"
    >
      <SSlot :prepend="prepend" :prependIcon="prependIcon" :append="append"
             :appendIcon="appendIcon"></SSlot>
    </el-autocomplete>
    <!-- 远程搜索组件 -->
    <el-autocomplete
      v-if="attr === 'autocompleteAsync'"
      :value="autoCompleteData"
      :fetch-suggestions="querySearchAsync"
      :placeholder="placeholder"
      @select="handleRestSelect"
      :disabled="disabled"
      :clearable="clearable"
      :size="size"
      :style="styleProps"
      @input="(e)=>$emit('input',e)"
    >
      <SSlot :prepend="prepend" :prependIcon="prependIcon" :append="append"
             :appendIcon="appendIcon"></SSlot>
    </el-autocomplete>
    <!-- 密码输入框 -->
    <el-input
      v-if="attr === 'input' && type === 'password'"
      :value="inputValue"
      :disabled="disabled"
      :clearable="clearable"
      :size="size"
      show-password
      :style="styleProps"
      @input="(e)=>$emit('input',e)"
    >
      <SSlot :prepend="prepend" :prependIcon="prependIcon" :append="append"
             :appendIcon="appendIcon"></SSlot>
    </el-input>
    <el-input
      v-if="attr === 'input' && type === 'textarea'"
      :type="type"
      :value="inputValue"
      :disabled="disabled"
      :clearable="clearable"
      :autosize="autosize"
      :size="size"
      show-password
      :style="styleProps"
      @input="(e)=>$emit('input',e)"
    >
      <SSlot :prepend="prepend" :prependIcon="prependIcon" :append="append"
             :appendIcon="appendIcon"></SSlot>
    </el-input>
    <!-- 数字输入框 -->
    <el-input-number
      v-else-if="attr === 'input' && type === 'number'"
      :value="inputNumberValue"
      :disabled="disabled"
      :clearable="clearable"
      :size="size"
      :step="step"
      :max="max"
      :min="min"
      :precision="precision"
      :style="styleProps"
      @input="(e)=>$emit('input',e)"
    >
      <SSlot :prepend="prepend" :prependIcon="prependIcon" :append="append"
             :appendIcon="appendIcon"></SSlot>
    </el-input-number>
    <!-- 普通输入框 -->
    <el-input
      v-else-if="attr === 'input'"
      :disabled="disabled"
      :clearable="clearable"
      :size="size"
      :value="inputValue"
      :class="styleProps"
      @input="(e)=>$emit('input',e)"
    >
      <SSlot :prepend="prepend" :prependIcon="prependIcon" :append="append"
             :appendIcon="appendIcon"></SSlot>
    </el-input>
  </div>
</template>

<script>
// 组件属性：trigger-on-focus 设置成true时，自己去加载自己的备选数据，需要传递过来备选数据URL，默认使用post加载，数据全量加载
import SSlot from "@/components/component/s-slot";

export default {
  name: "sInput",
  props: {
    // 区分不同大类型 autocomplete input
    _id: {
      type: String,
      default: 'C1927371664'
    },
    // 区分不同大类型 autocomplete input
    attr: {
      type: String,
      default: 'input'
    },
    // 文本域自定义
    styleProps: {
      type: Object,
      default: () => (
        {
          width: '300px'
        }
      )
    },
    // 什么类型输入框
    type: {
      type: String,
      default: ''
    },
    // 前置文本
    prepend: {
      type: String,
      default: ''
    },
    // 前置图标
    prependIcon: {
      type: String,
      default: ''
    },
    // 后置文本
    append: {
      type: String,
      default: ''
    },
    // 后置图标
    appendIcon: {
      type: String,
      default: ''
    },
    // 文本域自定义
    autosize: {
      type: Object,
      default: () => (
        {
          minRows: 2,
          maxRows: 4
        }
      )
    },
    // 输入框占位文本
    placeholder: {
      type: String,
      default: "请输入内容"
    },
    // 是否可清空
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否可清空
    clearable: {
      type: Boolean,
      default: true
    },
    // 是否可清空
    width: {
      type: String,
      default: '100px'
    },
    // 是否可清空
    size: {
      type: String,
      default: 'medium'
    },
    // 计数器步长
    step: {
      type: Number,
      default: 1
    },
    // 设置计数器允许的最大值
    max: {
      type: Number,
      default: Number.MAX_SAFE_INTEGER - 1
    },
    // 设置计数器允许的最小值
    min: {
      type: Number,
      default: Number.MIN_SAFE_INTEGER + 1
    },
    // 精度
    precision: {
      type: Number,
      default: 0
    },
    // 判断是否需要提示加载，如果需要那么需要设置 restUrl，如果restUrl 为空也不会加载数据
    rest: {
      type: Boolean,
      default: true
    },
    // restUrl: 调用url，全量加载数据，作为备选
    restUrl: {
      type: String,
      default: ""
    },
    // true：直接推荐值 false：输入后推荐值
    triggerOnFocus: {
      type: Boolean,
      default: false
    },
    // 异步加载定时任务
    time: {
      type: Number,
      default: 1000
    },
  },
  components: {
    SSlot
  },
  watch: {
    restUrl: {
      handler(url) {
        // 如果有url，那么调用url执行数据加载
        if (
          this.rest && url &&
          (this.attr === 'autocomplete' || this.attr === 'autocompleteAsync')) {
          this.handleRestData(url)
        }
      },
      deep: true,
      immediate: true
    }
  },
  data() {
    return {
      restaurants: [],
      // 建议或者远程绑定值
      autoCompleteData: '',
      timeout: null,
      // 输入框绑定的值
      inputValue: '',
      // 绑定输入框输入的数值
      inputNumberValue: '',
    }
  },
  methods: {
    // ------------- autocomplete start -------------
    // 加载核心数据
    handleRestData(url) {
      // 1、调用后台，查询数据

      let restData = [
        {"value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号"},
        {"value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号"},
        {"value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113"},
        {"value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13"}
      ];
      // 2、给出结果
      this.restaurants = restData
    },
    // 建议类型加载
    // 选择后调用方法
    handleRestSelect(item) {
      // 打印选择值
      // console.log(item);
    },
    // 建议加载数据筛选 start
    querySearch(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    // 建议类型加载数据筛选 end
    // 远端加载 start
    querySearchAsync(queryString, cb) {
      let restaurants = this.restaurants;
      let results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;

      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, this.time * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    }
    // 远端加载 end
    // ------------- autocomplete end -------------

    // ------------- input start -------------


    // ------------- input end -------------

    // ------------- input-number start -------------


    // ------------- input-number end -------------

  }
}
</script>

<style scoped>

</style>
